<template>
  <view class="viewport">
    <view class="container" :style="transFormStyle">
      <view class="main">
        <view class="main-left">
          <!-- 考场信息 -->
          <view class="kc">
            <view class="title">某某考场</view>
            <view class="message">第01考台</view>
          </view>
          <!-- 考生信息 -->
          <view class="ks">
            <view class="title">考试信息</view>
            <view class="message">
              <view class="imgDiv">
                <image class="avatar" :src="useMockRealExamAnswerAvatar()" mode="widthFix"></image>
              </view>
              <view class="text">姓名：某某某</view>
              <view class="text">性别：男</view>
              <view class="text">类型：{{ examRule?.driveTypeName.substring(0, 2) }}</view>
              <view class="text">科目：{{ examRule?.baseTypeName }}</view>
            </view>
          </view>
          <!-- 剩余时间 -->
          <view class="time">
            <view class="title">剩余时间</view>
            <view class="message">
              <uv-count-down ref="examCountDown" :time="(examRule!.examTime) * 60 * 1000" format="mm:ss" autoStart
                millisecond @change="onChangeExamCountDown" @finish="onFinishExamCountDown">
                <view class="exam-count-down-time">
                  {{ examCountDownTime?.minutes }}:{{ examCountDownTime?.seconds }}
                </view>
              </uv-count-down>
            </view>
          </view>
        </view>
        <view class="main-center">
          <!-- 试题 -->
          <view class="question">
            <view class="title">考试题目</view>
            <view>
              <scroll-view class="content" scroll-y>
                <view class="topic">{{ currentQuestionIndex + 1 }}. {{ currentQuestion.question }}</view>
                <view class="options" v-if="currentQuestion.optionType != QuestionOptionTypeEnum.Judge">
                  <view class="option-item" v-for="(item, index) in currentQuestionOptions" :key="index">
                    {{ item.name }}. {{ item.content }}
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <!-- 你选择的答案 -->
          <view class="selects">
            <view class="selects-left">
              您选择的答案：{{ choiceAnswer?.optionName }}
            </view>
            <view class="selects-right">
              <view class="text">
                选项：
              </view>
              <view class="select-option-item" :class="choiceAnswer?.optionValue.includes(item.value) ? 'active' : ''"
                v-for="(item, index) in currentQuestionOptions" :key="index" @tap="makeChoice(index)">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <view class="main-right">
          <view class="box-rows">
            <view class="box-item title">题目</view>
            <view class="box-item title" v-for="(item, index) in answerSheetCulumns" :key="index">{{ index + 1 }}列
            </view>
          </view>
          <view class="box-row2">
            <view class="box-cols">
              <view class="box-item title" v-for="(item, index) in 10" :key="index">{{ index + 1 }}行
              </view>
            </view>
            <view class="box-indexs">
              <view class="box-item index"
                :class="getQuestionExamResult(index).optionName ? getQuestionExamResult(index).optoinClass : index == currentQuestionIndex ? 'active' : ''"
                v-for="(item, index) in questions" :key="index" @tap="pickerTopic(index)">
                {{ getQuestionExamResult(index).optionName ? getQuestionExamResult(index).optionName : index ==
                  currentQuestionIndex ? choiceAnswer?.optionName : '' }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-tips">
        <view class="tips-left">
          <view class="title">
            操作提示：{{ optionTypeName }}
          </view>
          <view class="content">
            本题为{{ optionTypeName }} ，请在备选答案中选择一个你认为正确的答案！
          </view>
        </view>
        <view class="tips-right">
          <view class="btn" @click="onPrev">
            上一题
          </view>
          <view class="btn" @click="onNext">
            下一题
          </view>
          <view class="btn" @click="submitPaper">
            交卷
          </view>
        </view>
      </view>
      <view class="bottom-imgs">
        <!-- #ifndef MP-TOUTIAO -->
        <view class="bottom-go-back" @tap="goBack">
          <uni-icons type="left" size="22" color="#fff"></uni-icons>
        </view>
        <!-- #endif -->
        <view class="media-img-content">
          <image class="media-img" v-if="currentQuestion.mediaContent" @tap.stop="onMediaImgPreview(true)"
            :src="currentQuestion.mediaContent" mode="heightFix"></image>
        </view>

      </view>
      <!-- 试题图片预览 -->
      <view v-if="showMediaImg" class="show-medai-img-template" @tap.stop="onMediaImgPreview(false)">

        <image class="img" :src="currentQuestion.mediaContent" mode="heightFix" @tap.stop=" false">
        </image>
      </view>
      <!-- toast -->
      <view v-if="showToast" class="toast-template">
        <view class="text">{{ toastText }}</view>
      </view>

      <!-- 错题学习 -->
      <view v-if="showError" class="error-template">
        <view class="inner">
          <view class="title">
            错题学习
          </view>
          <view class="question-row">
            <view class="q-title">
              {{ currentQuestionIndex + 1 }}.{{ currentQuestion.question }}
            </view>
            <view v-if="currentQuestion.optionType != QuestionOptionTypeEnum.Judge" class="options">
              <view class="option" v-for="(item, index) in currentQuestionOptions" :key="index">
                {{ item.name }}.{{ item.content }}
              </view>

            </view>
          </view>
          <view class="img-row" v-if="currentQuestion.mediaContent">
            <image class="media-img" v-if="currentQuestion.mediaContent" :src="currentQuestion.mediaContent"
              mode="heightFix">
            </image>
          </view>
          <view class="answer-row">
            <view class="row1">
              <text class="spe">您的答案：{{ choiceAnswer?.optionName }}</text>正确答案：{{
                filterOptionName(currentQuestion.success!) }}
            </view>
            <view class="row2">
              <view class="confirm-btn" @click="showError = false">
                确认
              </view>
            </view>
            <view class="row3">
              页面将在<text class="spe">{{ closeSecond }}秒</text>后自动关闭，返回考试主界面
            </view>
          </view>
        </view>
      </view>
      <view v-if="showOver" class="over-template">
        <view v-if="submitPaperStep == 0" class="o-submitPaperStep">
          <view class="o-title">
            考试确认窗口
          </view>
          <view class="o-content">
            <view class="o-row">操作提示:</view>
            <view class="o-row">当前考试答对{{ examResultOver.corrects }}题，答错{{ examResultOver.errors }}题，未答{{
              examResultOver.noAnswers }}题
            </view>
            <view class="o-row">1.点击【确认交卷】，将提交考试成绩，考试结束！</view>
            <view class="o-row">2.点击【继续考试】，将关闭窗口，继续考试！</view>
          </view>
          <view class="o-operations">
            <view class="o-btn" @tap="confirmSubmitPaper">
              确认交卷
            </view>
            <view class="o-btn" @tap="continueF">
              继续考试
            </view>
          </view>
        </view>
        <view v-if="submitPaperStep == 1" class="o-submitPaperStep submitPaperStep2">
          <view class="o-title">
            考试确认窗口
          </view>
          <view class="o-content">
            <view class="o-row">某某考生</view>
            <view class="o-row">您本次考试得分{{ examResultOver.score }}分，{{ examResultOver.result ? '合格！继续加油。' :
              '不合格！祝你下次考试成功。' }}
            </view>
          </view>
          <view class="o-operations">
            <view class="o-btn" @tap="confirmLeave">
              确认离开
            </view>
          </view>
          <view class="time">
            页面将在{{ time }}秒后自动关闭，返回考试主界面
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch, computed } from 'vue'
  import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
  import type { ExamRule, ExamResult } from '@/api/exam/types'
  import type { LearnBaseQuestionInfo } from '@/api/base/types'
  import { ExamTypeEnum, QuestionOptionTypeEnum } from '@/api/constants'

  import { useMockRealExamAnswerAvatar } from '@/pagesExam/static/images'

  import { useExamQuestions, useAddExamResult } from '@/composables/MockExam'
  import { useAddQuestionAnswer } from '@/composables/Exercise'
  import uvCountDown from '@climblee/uv-ui/components/uv-count-down/uv-count-down.vue'
  import { formatDate } from '@/utils/index'


  // 屏蔽旋转竖屏样式
  const transFormStyle = ref<string>('')
  // 题库类型
  const baseType = ref<string>('km1')
  // 答题规则
  const examRule = ref<ExamRule>()
  // 考试倒计时
  const examCountDown = ref()
  // 倒计时时间
  const examCountDownTime = ref()
  /**
 * 考试结果
 */
  const examResult = ref<ExamResult>()
  // 试题
  const questions = ref<LearnBaseQuestionInfo[]>([])
  // 当前试题索引
  const currentQuestionIndex = ref<number>(0)
  onLoad((options: any) => {
    baseType.value = options.baseType
    let examQuestions = useExamQuestions(options)!
    questions.value = examQuestions.questions!
    examRule.value = examQuestions.examRule
    examResult.value = examQuestions.examResult
  })

  onShow(() => {
    uni.getSystemInfo({
      success: (res) => {
        let screenWidth = res.screenWidth
        let screenHeight = res.screenHeight
        let safeAreaInsets = res.safeAreaInsets
        let marginTop = 0
        let marginBottom = 0

        // #ifndef H5
        marginTop = safeAreaInsets!.top
        marginBottom = safeAreaInsets!.bottom
        // #endif

        // // #ifdef MP
        // let menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect()
        // marginTop = menuButtonBoundingClientRect.bottom;
        // // #endif

        let containerWidth = screenHeight - (marginTop + marginBottom)
        transFormStyle.value = `transform-origin: 0 0 ; transform: rotate(90deg) translateY(${-screenWidth}px);width:${containerWidth}px;height:${screenWidth}px;margin-top:${marginTop}px;margin-bottom:${marginBottom}px;`;
      }
    })

  })

  // 倒计时发生变化时间
  const onChangeExamCountDown = (e: any) => {
    examCountDownTime.value = e
  }

  // 答题卡的列数
  const answerSheetCulumns = computed(() => {
    let columns = 10
    if (baseType.value == 'km4') {
      columns = 5
    }
    return columns
  })
  // 答题卡的宽度
  const answerSheetWidth = computed(() => {
    let width = (answerSheetCulumns.value + 1) * 44 + 'rpx'
    return width;
  })


  // 当前试题
  const currentQuestion = computed(() => {
    return questions.value[currentQuestionIndex.value]
  })

  // 选项类型名称
  const optionTypeName = computed(() => {
    let typeName = "单选题"
    switch (currentQuestion.value.optionType) {
      case QuestionOptionTypeEnum.Judge:
        typeName = '判断题'
        break;
      case QuestionOptionTypeEnum.Multiple:
        typeName = '多选题'
        break
    }
    return typeName
  })

  export interface AnswerOptionType {
    //名称
    name: string,
    // 关键字
    value: string,
    // 内容
    content: string,
    // 是否选中
    selected: boolean,
    // 样式
    className?: string,
  }
  // 当前试题
  const currentQuestionOptions = computed(() => {
    let options: AnswerOptionType[] = []
    switch (currentQuestion.value.optionType) {
      case QuestionOptionTypeEnum.Judge:
        options = [
          { name: filterOptionName('Y'), value: 'Y', content: '正确', selected: false },
          { name: filterOptionName('N'), value: 'N', content: '错误', selected: false },
        ]
        break;
      default:
        options = [
          { name: 'A', value: 'A', content: currentQuestion.value.optionA!, selected: false },
          { name: 'B', value: 'B', content: currentQuestion.value.optionB!, selected: false },
          { name: 'C', value: 'C', content: currentQuestion.value.optionC!, selected: false },
          { name: 'D', value: 'D', content: currentQuestion.value.optionD!, selected: false },
        ]

        break
    }
    return options
  })

  const filterOptionName = (val: string) => {
    return val.replace('Y', '✓').replace('N', '×')
  }

  // 当前试题考试结果√
  const currentQuestionExamResult = computed(() => {
    let questionExamResult = examResult.value!.questions![currentQuestionIndex.value]
    return questionExamResult
  })
  // 上一题
  const onPrev = () => {
    if (currentQuestionIndex.value === 0) {
      openToast('当前为第一题')
      return
    }

    // 当前试题没有答题并且选择了答案
    if (!currentQuestionExamResult.value.answer && choiceAnswer.value) {
      // 当前试题自动答题
      let status = questionAutoAnswer()
      // 进行错题学习
      if (status === 0) {
        showError.value = true
        closeSecond.value = 8
        let timer = setInterval(() => {
          if (showError.value && closeSecond.value >= 1) {
            closeSecond.value--;
          } else {
            showError.value = false;
            clearInterval(timer);

            if (errorQuestionScore()) {
              confirmSubmitPaper()
            }
            else {
              currentQuestionIndex.value--
            }
          }
        }, 1000)
      }
      else {
        if (errorQuestionScore()) {
          confirmSubmitPaper()
        }
        else {
          currentQuestionIndex.value--
        }
      }
    } else {
      if (errorQuestionScore()) {
        confirmSubmitPaper()
      }
      else {
        currentQuestionIndex.value--
      }
    }
  }

  // 上一题
  const onNext = () => {

    // 当前试题没有答题并且选择了答案
    if (!currentQuestionExamResult.value.answer && choiceAnswer.value) {
      // 当前试题自动答题
      let status = questionAutoAnswer()
      // 进行错题学习
      if (status === 0) {
        showError.value = true
        closeSecond.value = 8
        let timer = setInterval(() => {
          if (showError.value && closeSecond.value >= 1) {
            closeSecond.value--;
          } else {
            showError.value = false;
            clearInterval(timer);
            if (errorQuestionScore()) {
              confirmSubmitPaper()
            }
            else {
              if (currentQuestionIndex.value + 1 === examRule.value?.examQuestionCount) {
                openToast('当前为最后一题')
                return
              }
              else {
                currentQuestionIndex.value++

              }
            }
          }
        }, 1000)
      }
      else {
        if (errorQuestionScore()) {
          confirmSubmitPaper()
        }
        else {
          if (currentQuestionIndex.value + 1 === examRule.value?.examQuestionCount) {
            openToast('当前为最后一题')
            return
          }
          else {
            currentQuestionIndex.value++

          }
        }
      }
    }
    else {
      if (errorQuestionScore()) {
        confirmSubmitPaper()
      }
      else {
        if (currentQuestionIndex.value + 1 === examRule.value?.examQuestionCount) {
          openToast('当前为最后一题')
          return
        }
        else {
          currentQuestionIndex.value++

        }
      }
    }
  }

  //答题卡-指定题目
  const pickerTopic = (index: number) => {
    currentQuestionIndex.value = index
  }

  // 做出选择
  const makeChoice = (index: number) => {

    // 当前试题已经答题
    if (currentQuestionExamResult.value.answer) {
      return
    }

    if (currentQuestion.value.optionType != QuestionOptionTypeEnum.Multiple) {
      currentQuestionOptions.value.forEach(item => item.selected = false)
      let choiceOption = currentQuestionOptions.value[index]
      choiceOption.selected = true
    }
    else {
      let choiceOption = currentQuestionOptions.value[index]
      choiceOption.selected = !choiceOption.selected
    }

    let selectedOptions = currentQuestionOptions.value.filter(item => item.selected)

    // 选择的选项名称
    let optionName = selectedOptions.reduce((answerName: any, item: AnswerOptionType) => {
      answerName += item.name
      return answerName
    }, '')
    // 选择的选项值
    let optionValue = selectedOptions.reduce((answerValue: any, item: AnswerOptionType) => {
      answerValue += item.value
      return answerValue
    }, '')

    choiceAnswer.value = { optionName, optionValue }
  }

  // 选择的答案对象
  interface ChoiceAnser {
    optionName: string,
    optionValue: string
  }
  // 选择的答案
  const choiceAnswer = ref<ChoiceAnser>()


  watch(currentQuestionIndex, () => {
    choiceAnswer.value = undefined
    if (currentQuestionExamResult.value.answer) {
      let optionValue = currentQuestionExamResult.value.answer
      let optionName = filterOptionName(optionValue)
      choiceAnswer.value = {
        optionName,
        optionValue
      }
    }
  })


  // 得到试题的答题结果
  const getQuestionExamResult = (index: number) => {
    let questionExamResult = examResult.value!.questions![index]
    let status = questionExamResult.status
    let answer = questionExamResult.answer
    let optionName = undefined
    let optoinClass = ''
    if (answer) {
      optionName = filterOptionName(answer!)
      if (index === currentQuestionIndex.value) {
        optoinClass += ' active'
      }
      if (status === 1) {
        optoinClass += ' correct'
      }
      else {
        optoinClass += ' error'
      }
    }

    return { optionName, optoinClass }

  }

  // 当前试题答题
  const questionAutoAnswer = () => {
    let questionExamResult = examResult.value!.questions![currentQuestionIndex.value]
    let status = 0
    let selectedAnswer = choiceAnswer.value?.optionValue
    // 选择的答案正确
    if (currentQuestion.value.success === selectedAnswer) {
      status = 1
    }
    // 当前试题自动答题
    questionExamResult.answer = selectedAnswer
    questionExamResult.status = status


    // 添加答题记录-答题结果
    let questionAnswerResult = {
      questionId: questionExamResult.questionId,
      baseTypeCode: currentQuestion.value.baseTypeCode,
      result: questionExamResult.answer,
      status: questionExamResult.status,
      creatTime: formatDate(new Date())
    }


    // 添加答题记录
    useAddQuestionAnswer(questionAnswerResult).then(res => {
      console.log('添加答题记录')
    })


    return status
  }
  // 交卷
  const submitPaper = () => {
    submitPaperStep.value = 0
    showOver.value = true
  }

  // 时间一到自动交卷
  const onFinishExamCountDown = () => {
    confirmSubmitPaper()
  }

  // 错题得分
  const errorQuestionScore = () => {
    // 如果答错的分数大于10分则提示交卷
    let errorAnswerCount = examResult.value?.questions?.filter(item => item.status === 0).length
    let errorScore = errorAnswerCount! * examRule.value!.itemScore
    if (errorScore == 100 - examRule.value!.standard + examRule.value?.itemScore!) {
      return true
    }
    else {
      return false
    }
  }

  //图片预览
  const showMediaImg = ref(false)

  // 外层点击
  const onMediaImgPreview = (val: boolean) => {
    showMediaImg.value = val
  }

  // toast
  const showToast = ref<boolean>(false)
  const toastText = ref<string>('')

  // 打开Toast
  const openToast = (msg: string) => {
    showToast.value = true
    toastText.value = msg
    setTimeout(() => {
      showToast.value = false
      toastText.value = ''
    }, 1000);
  }

  // 错题学习
  const showError = ref<boolean>(false)

  // 错题关闭时长
  const closeSecond = ref<number>(8)
  const showOver = ref<boolean>(false)
  const submitPaperStep = ref<number>(0)

  const examResultOver = computed(() => {
    let corrects = examResult.value?.questions?.filter(item => item.status === 1).length
    let errors = examResult.value?.questions?.filter(item => item.status === 0).length
    let noAnswers = examResult.value?.questions?.filter(item => item.status === -1).length

    examResult.value!.score = examRule.value!.itemScore * corrects!

    if (examResult.value!.score! >= examRule.value!.standard) {
      examResult.value!.result = 1
    }
    let result = examResult.value!.result
    let score = examResult.value!.score
    return {
      corrects, errors, noAnswers, score, result
    }

  })

  const time = ref<number>(8)

  // 确认交卷
  const confirmSubmitPaper = () => {
    submitPaperStep.value = 1
    showOver.value = true

    let corrects = examResult.value?.questions?.filter(item => item.status === 1).length
    examResult.value!.score = examRule.value!.itemScore * corrects!

    if (examResult.value!.score! >= examRule.value!.standard) {
      examResult.value!.result = 1
    }

    examCountDown.value.pause()
    let minutes = examCountDownTime.value.minutes
    let seconds = examCountDownTime.value.seconds
    let examCountDownSeconds = minutes * 60 + seconds
    examResult.value!.useTime = examRule.value!.examTime * 60 - examCountDownSeconds

    useAddExamResult(examResult.value!)

    let timer = setInterval(() => {
      if (time.value == 0) {
        clearInterval(timer)
        showOver.value = false
        confirmLeave()
      } else {
        time.value--
      }
    }, 1000)

  }
  // 继续考试
  const continueF = () => {
    showOver.value = false
  }

  /**
 * 确认离开
 */
  const confirmLeave = () => {
    uni.navigateBack()
  }
  //退出
  const goBack = () => {
    submitPaper()
  }

</script>

<style lang="scss" scoped>

  .page {
    background-color: #000;

  }

  .viewport {
    background-color: #000;
  }

  .container {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    background-color: #f1f4ed;

    .main {
      display: flex;
      flex: 1;

      .main-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        width: 158rpx;

        // 考场
        .kc {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 68rpx;
          border: 2rpx solid #000;

          .title {
            position: absolute;
            left: 12rpx;
            top: -10rpx;
            width: 84rpx;
            height: 20rpx;
            font-size: 18rpx;
            color: rgb(26, 55, 178);
            line-height: 20rpx;
            text-align: center;
            background-color: #F1F4ED;
          }

          .message {
            font-size: 22rpx;
            color: rgb(20, 20, 20);
          }
        }

        // 考生
        .ks {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          // align-items: center;
          height: 310rpx;
          margin-top: 18rpx;
          border: 2rpx solid #000;

          .title {
            font-size: 18rpx;
            color: rgb(26, 55, 178);
            position: absolute;
            width: 84rpx;
            background-color: #F1F4ED;
            height: 20rpx;
            line-height: 20rpx;
            left: 12rpx;
            top: -10rpx;
            text-align: center;
          }

          .message {
            font-size: 20rpx;
            color: rgb(20, 20, 20);

            .imgDiv {
              display: flex;
              flex-direction: row;
              justify-content: center;
              // align-items: center;
              margin: 20rpx 0;

              .avatar {
                width: 100rpx;
                width: 100rpx;
              }
            }
          }
        }

        // 剩余时间
        .time {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-top: 18rpx;
          flex: 1;
          border: 2rpx solid #000;

          .title {
            font-size: 18rpx;
            color: rgb(26, 55, 178);
            position: absolute;
            width: 84rpx;
            background-color: #F1F4ED;
            height: 20rpx;
            line-height: 20rpx;
            left: 12rpx;
            top: -10rpx;
            text-align: center;
          }

          .message {
            font-size: 24rpx;
            font-weight: bold;
            color: #0e0e0e;
          }
        }
      }

      .main-center {
        display: flex;
        flex-direction: column;
        flex: 1;

        .question {
          display: flex;
          flex-direction: column;
          position: relative;
          padding: 10rpx;
          height: 394rpx;
          border: solid 2rpx #3a3a3a;

          .title {
            font-size: 18rpx;
            color: rgb(26, 55, 178);
            position: absolute;
            width: 84rpx;
            background-color: #F1F4ED;
            height: 20rpx;
            line-height: 20rpx;
            left: 28rpx;
            top: -10rpx;
            text-align: center;
          }

          .content {
            font-size: 36rpx;
            font-weight: bold;
            line-height: 1.5;
            height: 380rpx;

            .topic {
              margin-top: 2rpx;
              margin-bottom: 10rpx;
            }

            .options {
              .option-item {
                margin-bottom: 8rpx;
              }
            }
          }
        }

        .selects {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          padding: 10rpx;
          font-size: 24rpx;
          font-weight: bold;

          .selects-left {
            color: #0d2a9a;
          }

          .selects-right {
            display: flex;
            align-items: center;

            .select-option-item {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin-right: 30rpx;
              height: 44rpx;
              width: 44rpx;
              border: 2rpx solid #000;
              box-sizing: border-box;
              background-color: #fff;
              font-weight: bold;

              &.active {
                background-color: #0e8ff4;
                color: #fff;
              }
            }
          }

        }
      }

      .main-right {
        width: v-bind(answerSheetWidth);

        .box-rows {
          width: v-bind(answerSheetWidth);
          height: 44rpx;
          display: flex;
          flex-direction: row;

        }

        .box-row2 {
          width: v-bind(answerSheetWidth);
          height: 440rpx;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-left-color: transparent;
          border-top-color: transparent;
          box-sizing: border-box;

          .box-cols {
            width: 44rpx;
            height: 440rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
          }

          .box-indexs {
            width: 100%;
            height: 220px;
            // height: $item-width * 10;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            align-content: flex-start;
          }
        }

        .box-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          width: 44rpx;
          height: 44rpx;
          font-size: 18rpx;
          border: 1rpx solid #000;
          // border-bottom-color: transparent;
          // border-right-color: transparent;

          &.title {
            color: rgb(22, 22, 22);
            background-color: rgb(14, 143, 244);
          }

          &.active {
            background-color: rgb(14, 143, 244);
            color: #fff;

            &.correct {
              color: rgb(22, 22, 22);
            }

            &.error {
              color: rgb(255, 0, 0);
            }

          }

          &.error {
            color: rgb(255, 0, 0);
          }
        }
      }
    }

    .bottom-tips {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      border: solid 2rpx #3a3a3a;
      border-top: 4rpx solid #055fc5;

      .tips-left {
        display: flex;
        flex-direction: column;

        .title {
          font-size: 20rpx;
          color: #ec2320;
          font-weight: bold;
        }

        .content {
          font-size: 18rpx;
          color: #373938;
        }

      }

      .tips-right {
        display: flex;
        align-items: center;

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 26rpx;
          width: 150rpx;
          height: 52rpx;
          font-size: 24rpx;
          color: #121212;
          font-weight: bold;
          background-color: #ffffff;
          border: solid 2rpx #6f6f6f;
          border-radius: 2rpx;
        }
      }
    }

    .bottom-imgs {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      border: solid 2rpx #3a3a3a;
      border-top: 4rpx solid #055fc5;

      /* #ifndef MP-TOUTIAO */
      .bottom-go-back {
        position: absolute;
        bottom: 30%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-self: flex-start;
        margin-left: 20rpx;
        width: 50rpx;
        height: 50rpx;
        background-color: #787a76;
        border: 1rpx solid #616360;
        border-radius: 50%;
      }

      /* #endif */
      .media-img-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;

        .media-img {
          height: 100%;
        }
      }
    }

    .show-medai-img-template {
      position: absolute;
      left: 0;
      top: -1rpx;
      z-index: 999;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba(127, 127, 127, .5);
      transform: translateZ(1px);

      .img {
        height: 50%;
      }
    }

    .toast-template {
      position: absolute;
      z-index: 999;
      left: 0;
      top: -1rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: transparent;
      transform: translateZ(1px);

      .text {
        background-color: #7F7F7F;
        width: 200rpx;
        height: 100rpx;
        border-radius: 10rpx;
        color: #FFFFFF;
        font-size: 22rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }

    .error-template {
      position: absolute;
      z-index: 999;
      left: 0;
      top: -1rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba(127, 127, 127, .7);
      transform: translateZ(1px);

      .inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 22rpx;
        width: 900rpx;
        background-color: #1B78E2;
        border-radius: 10rpx;

        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 18rpx 0;
          width: 100%;
          font-size: 28rpx;
          color: #fff;
          font-weight: bold;
        }

        .question-row {
          margin-bottom: 10rpx;
          padding: 10rpx;
          width: 860rpx;
          min-height: 200rpx;
          background-color: #fff;

          .q-title {
            font-size: 26rpx;
            line-height: 30rpx;
            color: rgb(21, 21, 21);
          }

          .options {
            .option {
              font-size: 26rpx;
            }
          }
        }

        .img-row {
          height: 122rpx;
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          .media-img {
            height: 100%;
          }
        }

        .answer-row {
          margin-top: 10rpx;
          padding: 10rpx;
          padding-bottom: 0;
          width: 860rpx;
          min-height: 160rpx;
          font-size: 26rpx;
          background-color: #fff;

          .row1 {
            font-size: 26rpx;
            color: rgb(21, 21, 21);

            .spe {
              margin-right: 10rpx;

              color: #fc0505;
            }
          }

          .row2 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;

            .confirm-btn {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin: 20rpx 0;
              width: 132rpx;
              height: 50rpx;
              font-size: 22rpx;
              color: rgb(21, 21, 21);
              font-weight: bold;
              border: 2rpx solid rgb(21, 21, 21);
            }
          }


          .row3 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;
            color: #aaa;

            .spe {
              font-size: 20rpx;
              color: #fc0505;
            }
          }
        }

      }
    }

    // 交卷步骤
    .over-template {
      position: absolute;
      z-index: 999;
      left: 0;
      top: -1rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba(127, 127, 127, .7);
      transform: translateZ(1px);

      .o-submitPaperStep {
        padding: 22rpx;
        width: 900rpx;
        height: 384rpx;
        background-color: #1B78E2;
        border-radius: 10rpx;

        .o-title {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 18rpx 0;
          width: 100%;
          font-size: 28rpx;
          color: #fff;
          font-weight: bold;
        }

        .o-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 195rpx;
          background-color: #FFFFFF;
          font-size: 26rpx;
          color: #151515;

          .o-row {
            width: 80%;
          }
        }

        .o-operations {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          margin-top: 20rpx;
          width: 100%;

          .o-btn {
            width: 175rpx;
            height: 67rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22rpx;
            font-weight: bold;
            background-color: #fff;
            border: 2rpx solid #6f6f6f;

          }
        }

        &.submitPaperStep2 {
          height: 424rpx;

          .o-content {
            .o-row {
              text-align: center;
            }
          }

          .o-operations {
            .o-btn {
              width: 181rpx;
              height: 70rpx;
            }
          }

          .time {
            margin-top: 10rpx;
            width: 100%;
            font-size: 22rpx;
            color: #fc0505;
            text-align: center;
          }
        }
      }
    }
  }


</style>
